<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登录验证和表单选择</title>
    <link href="../css/bootstrap-3.3.6.min.css" rel="stylesheet">
    <script src="../js/jquery-2.2.0.js"></script>

    <style>
        body {
            font-family: "微软雅黑";
            font-size: 1.6em;
            background: #c3d1ff;
        }

        a {
            cursor: pointer;
        }

    </style>
</head>
<body>
<div class="container">
    <br>
    <br>
    <h1>超链接提示</h1>
    <hr>
    <h3>超链接浏览器自带提示</h3>
    <div><a class="alert-link" title="超链接1的提示">超链接1</a></div>
    <div><a class="alert-link" title="超链接2的提示">超链接2</a></div>
    <h3>超链接自制提示</h3>
    <div><a class="alert-link myTooltip" title="超链接1的提示">超链接1</a></div>
    <div><a class="alert-link myTooltip" title="超链接2的提示">超链接2</a></div>
    <h3>图片预览效果</h3>
    <div class="row" id="imgPreview">
        <div class="col-md-3">
            <a href="img/五月的风.bmp" title="青岛五四广场的建筑五月的风"><img class="img-responsive img-thumbnail" src="img/五月的风.bmp"></a>
        </div>
        <div class="col-md-3">
            <a href="img/奥帆.jpg" title="青岛奥帆基地"><img class="img-responsive img-thumbnail" src="img/奥帆.jpg"></a>
        </div>
        <div class="col-md-3">
            <a href="img/海滨.jpg" title="青岛海岸风景"><img class="img-responsive img-thumbnail" src="img/海滨.jpg"></a>
        </div>
        <div class="col-md-3">
            <a href="img/青岛科技大学.jpg" title="青岛科技大学东部校区"><img class="img-responsive img-thumbnail" src="img/青岛科技大学.jpg"></a>
        </div>
    </div>
    <hr>
    <div style="height: 500px"></div>
    <br>
    <br>
</div>
<script>
    $(function () {
        var x = 20;
        var y = 10;
        $(".myTooltip").mouseover(function (e) {
            this.myTitle = this.title;//创建this对象的一个名为myTitle的属性，并用js原生方法获取title属性值赋给myTitle属性。
            this.title = "";
            var tooltip = '<div id="tooltip" hidden>' + this.myTitle + '</div>';
//            如果新元素里面不加入hidden，则会在body中也出现一份。后面的css设置只会复制，不会移动。
            $("body").append(tooltip);
            $("#tooltip").css({
                "position": "absolute",
                "left": e.pageX + x + "px",
                "top": e.pageY + y + "px",
                color: "red",
                background: "yellow",
                padding: "2px 5px",
                opacity: "0.7"
            }).show(0);
        }).mousemove(function (e) {
            $("#tooltip").css({
                left: e.pageX + x + "px",
                top: e.pageY + y + "px"
            })
        }).mouseleave(function(){
            $("#tooltip").remove();
            this.title = this.myTitle;
        })

        $("#imgPreview>div>a").mouseover(function(e){

            this.myTitle = this.title;
            this.title = "";
            var imgHtml = '<img id="tooltip" class="img-responsive img-thumbnail" src="'+this.href+'">';
            $("#imgPreview").append(imgHtml);
            $("#tooltip").css({
                position: "absolute",
                top: e.pageY + y + "px",
                left: e.pageX + x + "px",
                width: "50%"
            }).show();
//            alert(window.innerWidth)
            if(e.pageX>window.innerWidth/2)
                $("#tooltip").css("left", e.pageX - $("#tooltip").width() - x + "px").show(0);
        }).mousemove(function(e){
            $("#tooltip").css({
                top: e.pageY + y + "px",
                left: e.pageX + x + "px",
            }).show(0);
            if(e.pageX>window.innerWidth/2)
                $("#tooltip").css("left", e.pageX - $("#tooltip").width() - x + "px").show(0);

        }).mouseleave(function(){
            $("#tooltip").remove();
        })
    })

</script>
<!--<div style="background: rgba(164, 255, 169, 0.34)">.</div>-->
</body>
</html>